<template>
  <div class="content" >


    <div style="display: flex;width: 100%;justify-content: space-around">

      <div style="width: 90%;box-shadow: 1px 1px 1px 2PX #aaaaaa;">
        <p style="float:left;font-size: 20px;font-weight: bold;">当月日出入库</p>

        <div  ref="chartContainer1" style="height: 350px;">


        </div>
      </div>

      <div style="display: flex;width: 100%;justify-content: space-around">

      <div style="width: 90%;box-shadow: 1px 1px 1px 2PX #aaaaaa;">
        <p style="float:left;font-size: 20px;font-weight: bold;">当月接种数据</p>

        <div ref="chartContainer" style="height:350px;">


        </div>
      </div>
      </div>

    </div>







    <div   class="text main-text">欢迎使用 {{this.$project.projectName}}</div>

  </div>
</template>


<script>
import router from '@/router/router-static'
import * as echarts from 'echarts'
export default {
  //初始化 数据 变量等; 比如：下拉列表的下拉选项可以在这里写死  不对请求后台
  data() {
    return {
      searchForm: {
        key: ""
      },
      // 折线图数据
      StackedLineData: '', // 折线图数据
      ruku_arr: [], // 入庫
      chuku_arr: [], // 出庫
      riqi_arr:[],//日期

      //饼图数据
      jiezhongzongliang:'',
      zhengchangliang:'',
      yichangjiezhong:''


    }
  },
  //一般不用，比mounted之前
  created(){

    },
  //挂载  修改数据，比如请求后处理数据
  mounted(){
    this.init();
    //TODO 请求
    this.getZXTData();
    this.getBTJieZhongData();
    this.configOption();
    this.configOption2();


  },
  methods:{
    init(){
      if(this.$storage.get('Token')){
        this.$http({
          url: `${this.$storage.get('sessionTable')}/session`,
          method: "get"
        }).then(({ data }) => {
          if (data && data.code != 0) {
            router.push({ name: 'login' })
          }
        });
      }else{
        router.push({ name: 'login' })
      }
    },
    getBTJieZhongData(){
      this.$http({
        url: `jiezhongdengji/jiezhongshuju`,
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.jiezhongzongliang = data.data.jiezhongNum;
          this.zhengchangliang = data.data.zhengchangNum;
          this.yichangjiezhong = data.data.yichangNum;
          this.configOption();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getZXTData(){
      this.$http({
        url: `yimiaoxinxi/queryDateChuRuKu`,
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.riqi_arr = data.data.dates;
          this.ruku_arr = data.data.ruku;
          this.chuku_arr = data.data.chuku;
          this.configOption2();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    configOption2(){
      this.myEcharts = echarts.init(this.$refs.chartContainer1)
      const option = {

        // title: {
        //   text: '单日出入库'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            align: 'left'
          }
        },
        legend: {
          animation: true,
          top: 20,
          left: 'center',
          data: ['入库', '出库'],
          textStyle: {
            fontSize: 11
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.riqi_arr
        },
        yAxis: {
          type: 'value',
          lineHeight: 80
        },
        series: [
          {
            name: '入库',
            type: 'line',
            stack: 'Total',
            data: this.ruku_arr
          },
          {
            name: '出库',
            type: 'line',
            stack: 'Total',
            data: this.chuku_arr
          }

        ]
      };
      this.myEcharts.setOption(option)
      this.addResizeEvent()
      // 图表跟随屏幕视频
      window.addEventListener('resize', this.addResizeEvent)
    },

    configOption(){
      this.myEcharts = echarts.init(this.$refs.chartContainer)
      const option = {
        title: {
          text:this.jiezhongzongliang,
          subtext: `接种总量`,
          left: '49%',
          top: '40%',
          textAlign: 'center',
          textStyle: {
            fontSize: 26
          },
          subtextStyle: {
            fontSize: 14
          },
          show: true
        },

        tooltip: {
          show: true
        },
        legend: {
          animation: true,
          top: 50,
          right: 0,
          orient: 'vertical'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['58%', '90%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 14, // 文字的字体大小
                  color: '#ffffff'
                },
                formatter: '{c}' // d 为百分比
              }
            },
            emphasis: {
              show: true,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data:  [
              { value: this.zhengchangliang , name: '接种正常' },
              { value: this.yichangjiezhong, name: '接种异常' },

            ]
          }
        ]
      };
      this.myEcharts.setOption(option)
      this.addResizeEvent()
      // 图表跟随屏幕视频
      window.addEventListener('resize', this.addResizeEvent)
    }
    ,
    /**
     * 添加resize监听
     */
    addResizeEvent()
    {
      this.myEcharts.resize()
    }
  }

};




</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 500px;
  text-align: center;
  .main-text{
    font-size: 38px;
    font-weight: bold;
    margin-top: 15%;
  }
  .text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
}
</style>